<template>
	<view class="second">
		<view class="second_con">
			<view class="second_banner">
				<image src="../../static/second_banner.png" mode="widthFix"></image>
			</view>
			<view class="second_head">
				<view class="second_head_back" @click="back">
					<text>返回</text>
				</view>
				<view class="second_head_right">{{name}}</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list" @tap="detail" :data-id="item.id">
					<view class="item_head">
						<image :src="host + item.avatar" mode="widthFix"></image>
					</view>
					<view class="item_title">{{item.name}}</view>
				</view>
			</view>
		</view>
		<image src="../../static/top.png" class="back_top" @click="backTop"></image>
	</view>
</template>

<script>
	import network from "../../utils/network.js"
	import config from "../../config.js"
	export default {
		data() {
			return {
				list:[],
				host: config.host
			}
		},
		onLoad(options) {
			this.id = options.id
			this.name = options.name
			this.getList()
		},
		methods: {
			detail(e){
				const {id} = e.currentTarget.dataset
				uni.navigateTo({
					url:`../detail/detail?id=${id}`
				})
			},
			getList(){
				network.get('/index/api/getCompanyList',{categoryId: this.id}, res=>{
					this.list = res.data
				})
			},
			back(){
				// uni.navigateBack()
				uni.navigateTo({
					url:'../index/index'
				})
			},
			backTop(){
				uni.pageScrollTo({
					scrollTop: 0
				})
			}
		}
	}
</script>

<style scoped>
.second{
	max-width: 750px;
	margin: 0 auto;
	min-height: calc(100vh - 75rpx);
	padding-bottom: 75rpx;
	background: #f2ede1;
	position: relative;
}
.second_con{
	min-height: calc(100vh - 200rpx);
	padding-bottom: 125rpx;
	background: #f2ede1 url(../../static/bottom_bg.png) no-repeat center bottom;
	background-size: 264rpx 93rpx;
}
.second_banner{
	/* height: 164rpx; */
	
}
.second_banner image{
	width: 100%;
	height: auto;
}
.second_head{
	/* width: 673rpx; */
	width: 90%;
	height: 70rpx;
	border-radius: 35rpx;
	margin: 45rpx auto 0;
	background-color: #00913D;
	display: flex;
	justify-content: space-between;
}
.second_head_back{
	width: 206rpx;
	background-color: #23AB5C;
	height: 70rpx;
	border-radius: 35rpx;
}
.second_head_back text{
	display: block;
	width: 144rpx;
	height: 70rpx;
	border-radius: 35rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #004D20;
	font-size: 25rpx;
	background-color: #45C37A;
}
.second_head_right{
	padding-right: 55rpx;
	font-size: 25rpx;
	color: #FFF;
	line-height: 70rpx;
}
.list{
	padding: 15rpx 25rpx;
	display: flex;
	flex-wrap: wrap;
}
.item{
	border-radius: 30rpx;
	width: 205rpx;
	background-color: #58AF66;
	margin: 25rpx 15rpx;
}
/* .item:nth-child(3n+2){
	margin: 25rpx 28rpx 0;
} */
.item_head{
	width: 100%;
	/* height: 157rpx; */
	overflow: hidden;
	border-radius: 30rpx;
}
.item_head image{
	width: 100%;
	/* height: 100%; */
	display: block;
}
.item_title{
	padding: 10rpx 15rpx;
	font-size: 17rpx;
	color: #FFF;
	text-align: center;
}
.back_top{
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	right: 20rpx;
	bottom: 40rpx;
}

@media screen and (min-width: 750px) {
	.item {
		width: 225px;
	}
}
</style>
